/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <svg
    version="1.1"
    id="图层_1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="0 0 870 650"
    style="enable-background:new 0 0 870 650;"
    xml:space="preserve"
    :width="Width"
    :height="Height"
  >
    <g>
      <path
        class="st0"
        d="M542.7,0.2h-18H345.1h-18v196.7L327,452.4v197.7h18h179.6h18V452.4c0-0.6,0-1.3,0.1-1.9L542.7,0.2L542.7,0.2z"
      ></path>
      <g class="st1" v-if="showSidewalk">
        <g>
          <rect x="346.7" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="338.9" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="331.3" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="354.5" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="362.3" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="370.1" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="377.9" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="385.7" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="393.5" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="401.3" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="409.1" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="416.9" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="424.8" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="432.6" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="440.4" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="448.2" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="456" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="463.8" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="471.6" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="479.4" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="487.2" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="495" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="502.8" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="510.6" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
        <g>
          <rect x="518.4" y="297.3" class="st2" width="4" height="56.3"></rect>
          <rect x="526.4" y="297.3" class="st2" width="4" height="56.3"></rect>
          <rect x="534.3" y="297.3" class="st2" width="4" height="56.3"></rect>
        </g>
      </g>
      <g>
        <path class="st3" d="M308.3,650.2V0.2l0,0h-1v650"></path>
      </g>
      <rect x="324.8" y="0.2" class="st4" width="3" height="650"></rect>
      <g>
        <path class="st3" d="M561.7,0.2v650l0,0h1V0.2"></path>
      </g>
      <g>
        <g>
          <rect x="489.5" y="6.2" class="st5" width="2" height="11"></rect>
          <rect x="489.5" y="28.6" class="st5" width="2" height="11.6"></rect>
          <rect x="489.5" y="144.1" class="st5" width="2" height="11.6"></rect>
          <rect x="489.5" y="121.1" class="st5" width="2" height="11.6"></rect>
          <rect x="489.5" y="74.8" class="st5" width="2" height="11.6"></rect>
          <rect x="489.5" y="98" class="st5" width="2" height="11.6"></rect>
          <rect x="489.5" y="51.8" class="st5" width="2" height="11.6"></rect>
          <rect x="489.5" y="167.3" class="st5" width="2" height="11.6"></rect>
          <rect x="489.5" y="190.4" class="st5" width="2" height="14"></rect>
          <rect x="459.2" y="98" class="st5" width="2" height="11.6"></rect>
          <rect x="459.2" y="121.1" class="st5" width="2" height="11.6"></rect>
          <rect x="459.2" y="167.3" class="st5" width="2" height="11.6"></rect>
          <rect x="459.2" y="144.1" class="st5" width="2" height="11.6"></rect>
          <rect x="459.2" y="51.8" class="st5" width="2" height="11.6"></rect>
          <rect x="459.2" y="74.8" class="st5" width="2" height="11.6"></rect>
          <rect x="459.2" y="28.6" class="st5" width="2" height="11.6"></rect>
          <rect x="459.2" y="6.2" class="st5" width="2" height="11"></rect>
          <rect x="489.5" y="0.2" class="st5" width="2" height="0.9"></rect>
          <rect x="459.2" y="0.2" class="st5" width="2" height="0.9"></rect>
          <rect x="459.2" y="190.4" class="st5" width="2" height="14"></rect>
          <rect x="489.5" y="215" class="st5" width="2" height="11.6"></rect>
          <rect x="489.5" y="238.1" class="st5" width="2" height="14"></rect>
          <rect x="459.2" y="215" class="st5" width="2" height="11.6"></rect>
          <rect x="459.2" y="238.1" class="st5" width="2" height="14"></rect>
          <rect x="489.5" y="263.3" class="st5" width="2" height="14"></rect>
          <rect x="459.2" y="263.3" class="st5" width="2" height="14"></rect>
        </g>
        <g>
          <g>
            <rect x="430.2" y="-0.2" class="st4" width="2" height="276.4"></rect>
          </g>
          <rect x="401.8" y="-0.2" class="st5" width="2" height="275.4"></rect>
          <rect x="373.4" y="-0.2" class="st5" width="2" height="275.4"></rect>
          <rect x="345" y="-0.2" class="st5" width="2" height="275.4"></rect>
          <rect x="520.1" y="-0.2" class="st5" width="2" height="276.3"></rect>
          <polyline class="st5" points="432.2,275.3 432.2,277.3 327.6,277.3 327.6,275.3"></polyline>
        </g>
      </g>
      <g>
        <g>
          <rect x="378.3" y="632.9" class="st5" width="2" height="11"></rect>
          <rect x="378.3" y="609.8" class="st5" width="2" height="11.6"></rect>
          <rect x="378.3" y="494.3" class="st5" width="2" height="11.6"></rect>
          <rect x="378.3" y="517.4" class="st5" width="2" height="11.6"></rect>
          <rect x="378.3" y="563.6" class="st5" width="2" height="11.6"></rect>
          <rect x="378.3" y="540.5" class="st5" width="2" height="11.6"></rect>
          <rect x="378.3" y="586.7" class="st5" width="2" height="11.6"></rect>
          <rect x="378.3" y="471" class="st5" width="2" height="11.6"></rect>
          <rect x="378.3" y="445.5" class="st5" width="2" height="14"></rect>
          <rect x="408.6" y="540.5" class="st5" width="2" height="11.6"></rect>
          <rect x="408.6" y="517.4" class="st5" width="2" height="11.6"></rect>
          <rect x="408.6" y="471" class="st5" width="2" height="11.6"></rect>
          <rect x="408.6" y="494.3" class="st5" width="2" height="11.6"></rect>
          <rect x="408.6" y="586.7" class="st5" width="2" height="11.6"></rect>
          <rect x="408.6" y="563.6" class="st5" width="2" height="11.6"></rect>
          <rect x="408.6" y="609.8" class="st5" width="2" height="11.6"></rect>
          <rect x="408.6" y="632.9" class="st5" width="2" height="11"></rect>
          <rect x="378.3" y="649" class="st5" width="2" height="0.9"></rect>
          <rect x="408.6" y="649" class="st5" width="2" height="0.9"></rect>
          <rect x="408.6" y="445.5" class="st5" width="2" height="14"></rect>
          <rect x="378.3" y="423.4" class="st5" width="2" height="11.6"></rect>
          <rect x="378.3" y="397.9" class="st5" width="2" height="14"></rect>
          <rect x="408.6" y="423.4" class="st5" width="2" height="11.6"></rect>
          <rect x="408.6" y="397.9" class="st5" width="2" height="14"></rect>
          <rect x="378.3" y="372.8" class="st5" width="2" height="14"></rect>
          <rect x="408.6" y="372.8" class="st5" width="2" height="14"></rect>
        </g>
        <g>
          <g>
            <rect x="437.6" y="373.8" class="st4" width="2" height="276.4"></rect>
          </g>
          <rect x="466" y="374.8" class="st5" width="2" height="275.4"></rect>
          <rect x="494.4" y="374.8" class="st5" width="2" height="275.4"></rect>
          <rect x="522.8" y="374.8" class="st5" width="2" height="275.4"></rect>
          <rect x="347.7" y="373.9" class="st5" width="2" height="276.3"></rect>
          <polyline class="st5" points="437.6,374.8 437.6,372.8 542.2,372.8 542.2,374.8"></polyline>
        </g>
      </g>
      <rect x="542.2" y="0.2" class="st4" width="3" height="650"></rect>
      <polygon
        v-if="showPhaseIcon"
        id="东直行_18_"
        class="st6"
        points="387.9,228.3 387.9,252.5 384.2,252.5 389.4,261.6 394.6,252.5 390.9,252.5
390.9,228.3"
      ></polygon>
      <!-- <polygon
        id="东直行_17_"
        class="st6"
        points="415.4,228.3 415.4,252.5 411.7,252.5 416.9,261.6 422.1,252.5 418.4,252.5
418.4,228.3"
      ></polygon>
      <polygon
        id="东直行_16_"
        class="st6"
        points="358.2,228.3 358.2,252.5 354.5,252.5 359.7,261.6 364.9,252.5 361.2,252.5
361.2,228.3"
      ></polygon> -->
      <polygon
        v-if="showPhaseIcon"
        id="东直行_15_"
        class="st6"
        points="482.2,423 482.2,398.9 485.9,398.9 480.7,389.8 475.5,398.9 479.2,398.9
479.2,423"
      ></polygon>
      <!-- <polygon
        id="东直行_14_"
        class="st6"
        points="512.1,423 512.1,398.9 515.8,398.9 510.6,389.8 505.4,398.9 509.1,398.9
509.1,423"
      ></polygon>
      <polygon
        id="东直行_13_"
        class="st6"
        points="453.7,423 453.7,398.9 457.4,398.9 452.2,389.8 447,398.9 450.7,398.9 450.7,423"
      ></polygon> -->
    </g>
  </svg>
</template>
<script>
export default {
  name: 'pedSectionSN',
  data () {
    return {}
  },
  props: {
    Width: {
      type: String,
      default: '870px'
    },
    Height: {
      type: String,
      default: '650px'
    },
    showSidewalk: {
      type: Boolean,
      default: false
    },
    showPhaseIcon: {
      type: Boolean,
      default: false
    }
  },
  methods: {},
  mounted () {}
}
</script>
<style scoped>
.st0 {
  fill: #3d3939;
}
.st1 {
  opacity: 0.9;
}
.st2 {
  fill: #f2f2f2;
}
.st3 {
  fill: #e5e5d8;
}
.st4 {
  fill: #ccb63a;
}
.st5 {
  fill: #dddddd;
}
.st6 {
  fill: #ededed;
}
</style>
